<template>
	<view class="my-order">
		<view class="line"></view>
		<!-- 订单分类顶栏 -->
		<view class="order-header">
			<view class="header-item" :class="tabIndex==index?'active':'' " v-for="(item,index) in tabList"
				:key="index" @click="changeIndex(index)">{{item.name}}</view>
		</view>
		<block v-for="(tabItem,tabI) in tabList" :key="tabI">
			<view class=""  v-show="tabI==tabIndex">
				
				<!-- 订单内容 -->
				<view class="ordere-main" :style="'height:'+clentHeight+'px;'" v-if="tabItem.list.length>0">
					
					<view class="" v-for="(orderItem,orderIndex) in tabItem.list" :key="orderIndex">
						<!-- 订单头部 -->
						<view class="goods-sign">
							<view class="">订单编号：{{orderItem.order_id}}</view>
							<view class="f-active-color">{{orderItem.status}}</view>
							
						</view>
						<view class="line"></view>
						
						<!-- 订单中部---商品内容 -->
						<view class="order-goods" >
							<view class="goods-item" v-for="(goodsItem,goodsIndex) in orderItem.goods_item" :key="goodsIndex">
								<OrderList :goodsItem="goodsItem" :goodsIndex="goodsIndex"></OrderList>
								<!-- <view class="goods-content">
									<image class="goods-img" :src="goodsItem.imgUrl" mode=""></image>
									<view class="goods-text">
										<view class="goods-name">{{goodsItem.name}}</view>
										<view class="goods-color" >颜色分类：{{goodsItem.color}}</view>
										<view class="goods-size" >尺码：{{goodsItem.size}}</view>
										<view class="f-active-color" style="font-size: 24rpx;">七天无理由退货</view>
									</view>
									<view class="">
										<view class="">￥{{goodsItem.price_new}}</view>
										<view class="f-color">*{{goodsItem.num}}</view>
									</view>
								</view> -->
								<view class="line"></view>
							</view>
						</view>
						
						<!-- 订单尾部--支付与总金额 -->
						<view class="payment">
							<!-- 总价 -->
							<view class="total-price">
								订单金额：<text class="f-active-color">￥{{orderItem.totalPrice}}</text>（包含运费￥0.00）
							</view>
							<!-- 支付 -->
							<view class="pay">
								<view class="pay-text f-active-color">支付</view>
							</view>
						</view>
					<view class="line"></view>
					</view>
				</view>
				<!-- 无订单内容 -->
				<view class="no-order" :style="'height:'+clentHeight+'px;'" v-else>
					<view class="">您还没有相关订单</view>
					<view class="order-tohome">去首页逛逛</view>
				</view>
			
			</view>
		</block>
		
	</view>
</template>

<script>
	import orderlist from "@/components/order/order-list.vue";
	export default {
		components:{
			OrderList:orderlist
		},
		data() {
			return {
				// 内容块的高度值
				clentHeight: 0,
				// 当前顶栏索引
				tabIndex: 0,
				tabList: [
					{
						name: '全部',
						list:[
							{
								order_id:'1',
								status:"待付款",
								totalPrice:'598',
								goods_item:[
									{
										imgUrl:'../../static/img/Furnishing3.jpg',
										name:'很好看好看好看好看好看好看好看好看的鞋子啊',
										color:'粉色',
										size:'43',
										price_new:'299',
										num:'1'
									},
									{
										imgUrl:'../../static/img/Furnishing3.jpg',
										name:'很好看好看好看好看好看好看好看好看的鞋子啊',
										color:'粉色',
										size:'43',
										price_new:'299',
										num:'1'
									}
								]
							},
							{
								order_id:'2',
								status:"待付款",
								totalPrice:'299',
								goods_item:[
									{
										imgUrl:'../../static/img/Furnishing3.jpg',
										name:'很好看好看好看好看好看好看好看好看的鞋子啊',
										color:'粉色',
										size:'43',
										price_new:'299',
										num:'1'
									}
								]
							}
						],
					},
					{
						name: '待付款',
						list:[],
					},
					{
						name: '待发货',
						list:[],
					},
					{
						name: '待收货',
						list:[],
					},
					{
						name: '待评价',
						list:[],
					},
					{
						name: '退货管理',
						list:[],
					},
				]
			}
		},
		onReady() {
			// 获取系统信息的异步接口
			uni.getSystemInfo({
				success: (res) => {
					// console.log(res.windowHeight);
					// 获取可视区域高度
					// console.log(res.windowHeight);
					// 内容块高度 = 可视区域高度-顶部栏高度
					this.clentHeight = res.windowHeight - uni.upx2px(82) ;//- this.getClientHeight();
				}
			}) 
		},
		methods: {
			changeIndex(index) {
				this.tabIndex = index;
			},
			// 获取可视区域高度【兼容】
			getClientHeight(){
				// 获取系统信息的同步接口
				const res = uni.getSystemInfoSync();
				// res.platform：获取客户端平台，值域为：ios、android、mac（3.1.10+）、windows（3.1.10+）、linux（3.1.10+）
				// res.statusBarHeight：手机状态栏的高度
				// console.log(res.platform,res.statusBarHeight);
				const system = res.platform;
				if (system==='ios') {
					return 44+res.statusBarHeight;
				}else if (system==='android') {
					return 48+res.statusBarHeight;
				}else{
					// 微信小程序
					return 0;
				}
			},
		}
	}
</script>

<style scoped>
	.no-order{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
	}
	.order-tohome{
		padding: 6rpx 60rpx;
		border: 2rpx solid #49BDFB;
		color: #49BDFB;
		border-radius: 30rpx;
	}
	.my-order{
		background-color: #eeeeee;
	}
	.line {
		width: 100%;
		height: 2rpx;
		background-color: #E1E1E1;
	}

	.order-header {
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2rpx solid #f7f7f7;
	}
	.ordere-main{
		margin-bottom: 15rpx;
	}
	.header-item {
		text-align: center;
		flex: 1;
		line-height: 80rpx;
	}

	.active {
		border-bottom: 4rpx solid #49BDFB;
	}
	.goods-sign{
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		padding: 20rpx;
		font-size: 24rpx;
		font-weight: bold;
	}
	.goods-content{
		padding: 10rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f7f7f7;
	}
	.goods-text{
		/* width: 360rpx; */
		padding: 0 10rpx;
		font-size: 26rpx;
		/* background-color: #ffffff; */
	}
	.goods-name{
		width: 200px;   
		overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
		text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
		white-space: nowrap;     /*文本不换行*/
	}
	.goods-img{
		width: 160rpx;
		height: 160rpx;
	}
	.goods-size{
		font-size: 22rpx;
		color: #636263;
	}
	.goods-color{
		font-size: 22rpx;
		color: #636263;
	}
	.payment{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
	}
	.total-price{
		/* display: flex; */
		padding: 20rpx;
		/* justify-content: flex-end; */
		/* background-color: #ffffff; */
	}
	.pay{
		/* display: flex; */
		padding: 20rpx;
		/* justify-content: flex-end; */
		/* background-color: #ffffff; */
	}
	.pay-text{
		border: 2rpx solid #49BDFB;
		padding: 6rpx 40rpx;
		border-radius: 30rpx;
	}
</style>
